<template>
	<view class="strategy-detail-page">

		<!-- 顶部导航栏 -->
		<nav-bar title="营销策略详情" />

		<!-- 详情内容 -->
		<scroll-view scroll-y="true" class="detail-scroll">
			<view class="detail-container">
				<!-- 策略媒体 -->
				<view class="detail-media" :class="{ 'media-video': strategyData.mediaType === 'video' }">
					<image v-if="strategyData.mediaType === 'image'" :src="strategyData.mediaUrl" mode="aspectFill">
					</image>
					<video v-else-if="strategyData.mediaType === 'video'" id="detailVideo" ref="detailVideo"
						:src="strategyData.mediaUrl" :poster="strategyData.poster" controls loop :initial-time="0"
						:danmu-list="[]" enable-danmu danmu-btn style="width: 100%; height: 100%;"></video>
				</view>

				<!-- 策略信息 -->
				<view class="detail-content">
					<view class="detail-header">
						<text class="detail-title">{{ strategyData.title }}</text>
						<view class="detail-category">
							<text class="category-label">分类：</text>
							<text class="category-value">{{ strategyData.category }}</text>
						</view>
					</view>

					<view class="detail-description">
						<text class="description-label">策略描述：</text>
						<text class="description-content">{{ strategyData.description }}</text>
					</view>

				</view>
			</view>
		</scroll-view>


		<!-- 加载状态 -->
		<view class="loading-overlay" v-if="isLoading">
			<view class="loading-content">
				<loading class="loading-icon" size="large" color="#07c160"></loading>
				<text class="loading-text">加载中...</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { OperationStrategy } from '@/types/marketing';
	import { getStrategiesById } from '@/services/marketing';
	import { baseURL } from '@/utils/config';
	import NavBar from '@/components/nav-bar.vue';
	import { showToast, showLoading, hideLoading, getSafeAreaTop, navigateBack } from '@/utils/global';
	import { getThemeStyles } from '@/stores/theme';
	
	// 响应式数据
	const isLoading = ref<boolean>(false);
	const strategyData = ref<OperationStrategy>({
		id: '',
		title: '',
		description: '',
		mediaType: 'image',
		mediaUrl: '',
		poster: '',
		category: '',

	});

	// 主题相关
	const themeStyles = computed(() => getThemeStyles());

	// 获取策略详情
	const fetchStrategyDetail = async (strategyId : number) => {
		try {
			isLoading.value = true;
			const response = await getStrategiesById(strategyId);
			strategyData.value = response.data;
			strategyData.value.mediaUrl = baseURL + strategyData.value.mediaUrl
		} catch (error) {
			console.error('获取策略详情失败:', error);
			showToast('获取详情失败');
		} finally {
			isLoading.value = false;
		}
	};

	// 页面加载时获取路由参数中的strategyId
	onLoad((options : any) => {
		console.log("options", options);
		// 注意：uni-app 路由参数通常是string类型
		if (options.strategyId) {
			fetchStrategyDetail(options.strategyId);
		}
	});

	// 监听主题变化
	onMounted(() => {
		uni.$on('themeChange', () => {
			// 主题切换时，computed 会自动更新
		});
	});

	// 清理事件监听
	onBeforeUnmount(() => {
		uni.$off('themeChange');
	});
</script>

<style scoped>
	.strategy-detail-page {
		width: 100%;
		height: 100vh;
		background: v-bind('themeStyles.bgSecondary');
		display: flex;
		flex-direction: column;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 20rpx 0;
		position: relative;
		z-index: 100;
	}

	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 88rpx;
	}

	.navbar-left {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.back-icon {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
	}

	.back-text {
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
	}

	.navbar-title {
		font-size: 36rpx;
		color: #fff;
		font-weight: 600;
		text-align: center;
		flex: 1;
	}

	.navbar-right {
		width: 100rpx;
	}

	/* 详情内容滚动区域 */
	.detail-scroll {
		flex: 1;
		width: 100%;
	}

	.detail-container {
		padding: 20rpx;
	}

	/* 详情媒体 */
	.detail-media {
		width: 100%;
		height: 400rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background: v-bind('themeStyles.bgTertiary');
		position: relative;
		margin-bottom: 30rpx;
		box-shadow: v-bind('themeStyles.shadowSm');
	}

	.detail-media image,
	.detail-media video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}



	/* 详情内容 */
	.detail-content {
		background: v-bind('themeStyles.bgCard');
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		border: v-bind('themeStyles.cardBorder');
	}

	.detail-header {
		margin-bottom: 30rpx;
	}

	.detail-title {
		font-size: 48rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textPrimary');
		line-height: 1.4;
		margin-bottom: 20rpx;
		display: block;
	}

	.detail-category {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.category-label {
		font-size: 28rpx;
		color: v-bind('themeStyles.textTertiary');
		font-weight: 500;
	}

	.category-value {
		font-size: 28rpx;
		color: v-bind('themeStyles.primaryColor');
		font-weight: 600;
		background: v-bind('themeStyles.primaryGradient');
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.detail-description {
		margin-bottom: 30rpx;
	}

	.description-label {
		font-size: 32rpx;
		color: v-bind('themeStyles.textPrimary');
		font-weight: 600;
		margin-bottom: 16rpx;
		display: block;
	}

	.description-content {
		font-size: 30rpx;
		color: v-bind('themeStyles.textSecondary');
		line-height: 1.8;
		display: block;
	}



	/* 加载状态 */
	.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.loading-content {
		background-color: v-bind('themeStyles.bgCard');
		padding: 40rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
	}

	.loading-icon {
		margin-bottom: 20rpx;
	}

	.loading-text {
		font-size: 28rpx;
		color: v-bind('themeStyles.textSecondary');
	}
</style>